<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta charset="UTF-8">
<title>失物招领平台注册</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/bootstrap.css" />
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<ol class="breadcrumb">
					<li><a href="main.jsp">徐州工程学院失物招领平台</a></li>
					<li class="active">注册</li>
				</ol>
			</div>
			<div class="col-md-12">
				<div class="col-md-7">
					<div class="forborder form-horizontal">
						<div class="form-group">
							<!--
                                	用户名
                                -->
							<label for="inputEmail3" class="col-sm-3 control-label">请输入用户名(*)</label>
							<div class="col-sm-9">
								<input type="name" class="form-control" id="inputuser"
									placeholder="请输入用户名(6到12位)" name="UserId">
							</div>
						</div>
						<!--密码 -->
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-3 control-label">请输入密码(*)</label>
							<div class="col-sm-9">
								<input type="password" class="form-control" id="inputpwd"
									placeholder="请输入密码(6到12位)" name="pasword">
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-3 control-label">请确认密码(*)</label>
							<div class="col-sm-9">
								<input type="password" class="form-control" id="inputnewpwd"
									placeholder="请确认密码">
							</div>
						</div>

						<!-- 联系方式-->
						<div class="form-group">
							<label for="inputPhone3" class="col-sm-3 control-label">请输入联系方式(*)</label>
							<div class="col-sm-9">
								<input type="phone" class="form-control" id="inputPhone"
									placeholder="11位联系方式">
							</div>
						</div>

						<!--性别-->
						<div class="form-group">
							<label for="inputGender3" class="col-sm-3 control-label">请选择性别(*)</label>
							<div class="col-sm-9">
								<div class="radio">
									<label> <input type="radio" name="gender" id="gender"
										value="男" checked> 男
									</label>
								</div>
								<div class="radio">
									<label> <input type="radio" name="gender" id="gender1"
										value="女" checked> 女
									</label>
								</div>
							</div>
						</div>

						<!--联系地址-->
						<div class="form-group">
							<label for="inputAddress3" class="col-sm-3 control-label">请输入联系地址</label>
							<div class="col-sm-9">
								<textarea class="form-control" rows="3" id="location"></textarea>
							</div>
						</div>

						<!--电子邮件-->
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-3 control-label">电子邮件</label>
							<div class="col-sm-9">
								<input type="email" class="form-control" id="inputem"
									placeholder="请输入正确的邮件">
							</div>
						</div>
						<div class="form-group">

								<div class="col-sm-12">
									<label for="inputEmail3" class="col-sm-5 control-label" style="color: red;" id="textnote"></label>
								</div>
							</div>

						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-6">
								<button type="button" class="btn btn-default" id="reguser">注册</button>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<button type="reset" class="btn btn-danger" id="bunreset">重置</button>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">注意事项：</h3>
						</div>
						<div class="panel-body">
							<p style="color: red;">1.带*的一律为必填项</p>
							<br> 2.填写用户详细信息只是为了方便联系他人，不会见信息泄露他人，请放心填写。
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
			$(function() {
				$("#textnote").hide();
				$("#inputuser").keyup(function(e) {
					if($("#inputuser").val().length < 6 || $("#inputuser").val().length > 12) {
						$("#textnote").text("用户名需要在6到12位").show();
						$("#reguser").addClass("disabled");
					} else {
						$("#textnote").hide();
						$("#reguser").removeClass("disabled");
					}
				});
				$("#inputpwd").keyup(function(e) {
					if($("#inputpwd").val().length < 6 || $("#inputpwd").val().length > 12) {
						$("#textnote").text("密码需要6到12位").show();
						$("#reguser").addClass("disabled");
					} else {
						$("#textnote").hide();
						$("#reguser").removeClass("disabled");
					}
				});
				$("#inputnewpwd").change(function() {
					if($("#inputpwd").val() != $("#inputnewpwd").val()) {
						$("#textnote").text("确认密码不一致").show();
						$("#reguser").addClass("disabled");
					} else {
						$("#textnote").hide();
						$("#reguser").removeClass("disabled");
					}
				});

				$("#inputPhone").change(function() {
					var phone = $("#inputPhone").val();
					var reg = /^1[0-9]{10}$/;
					if(reg.test(phone) == false) {
						$("#textnote").text("联系方式不正确").show();
						$("#reguser").addClass("disabled");
					} else {
						$("#textnote").hide();
						$("#reguser").removeClass("disabled");
					}
				})
				$("#inputem").change(function() {
					var email = $("#inputem").val();
					var reg =  /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; //邮箱
					if(reg.test(email) == false) {
						$("#textnote").text("邮箱格式不正确").show();
						$("#reguser").addClass("disabled");
					} else {
						$("#textnote").hide();
						$("#reguser").removeClass("disabled");
					}
				});
				$("#reguser").click(function() {
					if($("#inputuser").val() == "" || $("#inputpwd").val() == "" || $("#inputnewpwd").val() == "" ||
						$("#inputPhone").val() == "") {
						alert("请填写必填项");
					} else {
						//alert(123);
						var UserId = $("#inputuser").val();
						var pasword = $("#inputpwd").val();
						var PhoneNumber = $("#inputPhone").val();
						var Gender=$('input:radio[name="gender"]:checked').val();
						if($("#location").val()) {
							var DeatailAddress = $("#location").val();
						}
						if($("#inputem").val()) {
							var Email = $("#inputem").val();
						}
						$.ajax({
							type: "post",
							url: "${pageContext.request.contextPath}/user/Register.action",
							data:{"UserId":UserId,"pasword":pasword,"PhoneNumber":PhoneNumber,"Gender":Gender,
							 "DeatailAddress":DeatailAddress,"Email":Email},
							dataType:"json",
							success:function(data){
								alert("成功");
								window.location.href='../user/main.jsp';
							},
							error:function(XMLHttpRequest, textStatus, errorThrown) {
			                    alert("失败");
			                }
						});
					}

				})
			})
			
			$("#bunreset").click(function(){
				$(":input").val("");
				$("#textnote").hide();
				
			})
		</script>
</body>

</html>